@mixin default-flex {
    display: flex;
    justify-content: center;
}

@mixin XYCenter {
    display: flex;
    justify-content: center;
    align-items: center;
}

/*********上下边框线**************/
@mixin Xborder-1px-after($color){
	position:relative;
	&:after{
		content: '';
		position: absolute;
        top: 0;
        right:0;
		bottom: 0;
        width: 1px;
        z-index: 1;
		background-color: $color;
        -webkit-transform: scaleX(.5);
        transform: scaleX(.5);
   }
}
	
@mixin Xborder-1px-before($color){
	position:relative;
	&:before{
		content: '';
        position: absolute;
        left:0;
		top: 0;
		bottom: 0;
        width: 1px;
        z-index: 1;
		background-color: $color;
        -webkit-transform: scaleX(.5);
        transform: scaleX(.5);
   }
}
@mixin Yborder-1px-after($color){
	position:relative;
	&:after{
		content: '';
		position: absolute;
		right: 0;
		left: 0;
        height: 1px;
        bottom: 0;
        z-index: 1;
		background-color: $color;
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
   }
}
	
@mixin Yborder-1px-before($color){
	position:relative;
	&:before{
		content: '';
        position: absolute;
        top: 0;
		right: 0;
		left: 0;
        height: 1px;
        z-index: 1;
		background-color: $color;
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
   }
}

.a-grid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    .a-grid__item {
        text-align:center;
        position:relative;
        >.item__content {
            display:flex;
            flex-flow: column;
            align-items: center;
            justify-content: center;
        }
    }
}

@mixin grid($row:3, $column:3, $hasBorder:false, $isSquare:true) {
    @extend .a-grid;

    .a-grid__item {

        flex-basis: 100%/$column;

        @if($isSquare) {
            padding-bottom: 100%/$column;
            height: 0;
        }

        >.item__content {

            @if($isSquare) {
                position:absolute;
                top:0;left:0;right:0;bottom:0;
            }
        }
    }

    @for $index from 1 to (($row - 1) * $column + 1) {
        .a-grid__item:nth-child(#{$index}) {
            @if($hasBorder) {
                border-bottom: 1px solid #eee;
            }
        }
    }

    @for $index from 1 to $column {
        .a-grid__item:nth-child(#{$column}n + #{$index}) {
            @if($hasBorder) {
                border-right: 1px solid #eee;
            }
        }
    }
}